<template>
    <div id="environmentalmonitor">
        <Title class="title">
            <template #title>
                环境监测
            </template>
        </Title>

        <DataView :data="data1"></DataView>

        <Console class="console"></Console>

        <Table border :columns="columns" :data="data" class="table">

        <template #condition="{ index }">
            <RadioGroup v-model="data[index].condition" @click="show(index)">
                <Radio label="true">大于</Radio>
                <Radio label="false">小于</Radio>
            </RadioGroup>
        </template>

        <template #limitvalue="{ index }">
            <input type="number" v-model="data[index].limitvalue" @click="show(index)" >&nbsp;&nbsp;<span>{{ unit[index] }}</span>
        </template>
    </Table>
    </div>
</template>

<script>
import Title from '@/components/device/Title.vue';
import DataView from '@/components/device/environmentalmonitor/DataView.vue';
import Console from '@/components/device/environmentalmonitor/Console.vue';
import { resolveComponent,resolveDirective} from 'vue';
import { toRaw } from '@vue/reactivity'
import { Table, Button, RadioGroup, Radio } from 'view-ui-plus'
import '../api.js'
import { getclimate } from '../api.js';

export default {
    name:'environmentalmonitor',
    // props: ['modelValue'],
//   emits: ['update:modelValue'],
    components: {
        Title, DataView, Console, Table, Button, RadioGroup, Radio
    },
    data() {
        return {
            data: [
                {
                    id: 'e1',
                    element: "风速",
                    type: '风速',
                    condition:'false',
                    limitvalue:31
                },
                {
                    id: 'e2',
                    element: '雨量',
                    type: '雨量',
                    condition:'true',
                    limitvalue:29

                },
                {
                    id: 'e3',
                    element: '大气温度',
                    type: '大气温度',
                    condition:'true',
                    limitvalue:30

                },
                {
                    id: 'e4',
                    element: "雨量累计",
                    type: '雨量累计',
                    condition:'true',
                    limitvalue:50

                },
                {
                    id: 'e5',
                    element: "大气湿度",
                    type: '大气湿度',
                    condition:'true',
                    limitvalue:40


                },
                {
                    id: 'e6',
                    element: "土壤温度",
                    type: '土壤温度',
                    condition:'true',
                    limitvalue:40


                },
                {
                    id: 'e7',
                    element: "土壤湿度",
                    type: '土壤湿度',
                    condition:'true',
                    limitvalue:40


                }
            ],
            data1: [
                {
                    content: "风速",
                    value: ''
                },
                {
                    content: "雨量",
                    value: ''
                }, {
                    content: "大气温度",
                    value: ''
                },
                {
                    content: "雨量累计",
                    value: ''
                },
                {
                    content: "数字气压",
                    value: ''
                },
                {
                    content: "总辐射",
                    value: ''
                },
                {
                    content: "风向",
                    value: ''
                },
                {
                    content: "辐射累计",
                    value: ''
                },
                {
                    content: "大气湿度",
                    value: ''
                },
                {
                    content: "土壤温度",
                    value: ''
                },
                {
                    content: "照度",
                    value: ''
                },
                {
                    content: "土壤湿度",
                    value: ''
                },
            ],
          
            unit:[
            'm/s','mm','℃','mm','%RH','℃','%'
            ],
            columns: [
                {
                    title: '通道号',
                    key: 'id',
                    width:'',
                    fixed:'left',
                    align: "center"
                },
                {
                    title: '要素',
                    key: 'element',
                    width:'',
                    align: "center"
                },
                {
                    title: '类型',
                    key: 'type',
                    align: "center"
                },
                {
                    title: '条件',
                    slot:"condition",
                    width:'',

                    align: 'center',
                    // render: (h, params) => {

                    //     return h(
                    //         RadioGroup,
                    //         {
                    //             vModel:params.row.condition,

                    //         // onChange:(val)=>{
                    //         //     console.log(val.target.checked);
                    //         //     console.log(val.target);
                    //         // },
                    //         // onClick:(e)=>{
                    //         //     console.log(params.index);
                    //         //     console.log(toRaw(this.data[params.index]));
                    //         //     console.log(e.currentTarget);
                    //         // }
                    //         },
                    //         [
                    //           h(
                    //             Radio,
                    //             {
                    //                 label:true,
                    //               onClick:(val)=>{
                    //                 console.log("val",val);
                    //                 console.log(params.row.condition);
                    //                 console.log("test",this.test);
                    //               },
                                  
                    //             },
                    //             "大于"
                    //           ),
                    //           h(
                    //             Radio,
                    //             {
                    //                 border:false,
                    //                 label: '小于',
                    //               style: {
                    //                 marginLight: "5px"
                    //               }
                    //             },
                    //             "小于"
                    //           )
                    //         ],
                    //         h("input",{
                    //                 vModel:this.test,
                    //                 placeholder:"1111111111",
                    //                 onClick:()=>{
                    //                     console.log(this.test);
                    //                 },
                    //                 onChange:()=>{
                    //                     console.log(222222222);
                    //                 }
                                
                    //         })
                    //     )
                    // }
                },
                {
                    title:'阈值',
                    slot:"limitvalue",
                    width:'',

                    align:'left',
                }
            ],
            count:0
        }
    },
    activated(){},
    methods:{
        sd(){
            console.log(this.data);
        },
        show(index){
            console.log(index);
        },
        changecellwidth(){
            for(let i=0;i<this.columns.length;i++){
                        this.columns[i].width =100;
                    }

                    this.columns[4].width = 270
                    // this.columns[5].width = 90
                    // this.columns[3].width = 180
        },
        async Getclimate() {
            await getclimate("/climate_condition/data"
            ).then((Response) => {
                let a = JSON.parse(Response.data.entity);
                for(var i=0;i<12;i++){
                    this.data1[i].value = a[i].eValue+a[i].eUnit;
                }

                // this.data1 = Response;
            });
        },
    getwidth() {
            console.log("device", window.innerWidth);
            this.bigwidth = window.innerWidth > 720 ? true : false;
            if(window.innerWidth<720){
                this.changecellwidth();
            }

        },
    },
    created() {
        this.getwidth();
        this.Getclimate();
    },
    mounted() {
        window.addEventListener('resize', () => {
            return (() => {
                this.$nextTick(() => {
                    this.bigwidth = window.innerWidth > 720 ? true : false;
                    if(window.innerWidth<720){
                  this.changecellwidth();
                  
                    }

                })
            })();
        });
    },
}

</script>

<style lang="less" scoped>
.title{
    margin-top: 25px;
    margin-bottom: 20px;
}
#environmentalmonitor {
    .console {
        width: 80%;
        margin: 0 auto;
        // padding-top: 1rem;
    }
}
@media screen and (max-width: 821px) {
#environmentalmonitor{
    font-size: calc(100vw * 30 / 1920);

}

}
</style>